	<!DOCTYPE html>
<html lang="zh-Hans">
	<head>
		<!--[if lt IE 9]>
        	<style>body {display: none; background: none !important} </style>
        	<meta http-equiv="Refresh" Content="0; url=//outdatedbrowser.com/" />
    	<![endif]-->

		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no" />
		<meta name="author" content="Shawn" />
		

		<link rel="apple-touch-icon" href="http://og6esej9r.bkt.clouddn.com/me-0.JPG">
		<link rel="alternate" href="/atom.xml" title="诗酒趁年华" type="application/atom+xml">
		<link rel="shortcut icon" href="/img/me.JPG">
		<link href="//cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">
		<link href="//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">
		<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
    	<link href="//cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-loading-bar.css" rel="stylesheet">
		<link rel="stylesheet" href="/css/style.css">
		
		

		<link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
		
		<title>给自己的主题添加夜间模式 | 诗酒趁年华</title>

		<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
		<!--<script src="/js/huaji.js"></script>-->
		
		<script src="/js/APlayer.min.js"></script>
		<script src="/js/canvas.js"></script>
  		<script src="/js/leftmusic.js"></script>
  		<script src="/js/jquery.marquee.min.js"></script>
  		<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		
		 
		<!-- Live2D Library -->
        <script src="/js/live2d.min.js"></script>        
        <!-- Live2D Framework -->
        <script src="/js/Live2DFramework.js"></script>
        <!-- User's Script -->
    	<script src="/js/utils/MatrixStack.js"></script>
        <script src="/js/utils/ModelSettingJson.js"></script>
        <script src="/js/PlatformManager.js"></script>
        <script src="/js/LAppDefine.js"></script>
        <script src="/js/LAppModel.js"></script>
        <script src="/js/LAppLive2DManager.js"></script>
        <script src="/js/22.js"></script>	
         		        
	
		<script>
  			var yiliaConfig = {
     	   		fancybox: true,
        		animate: true,
        		isHome: false,
        		isPost: true,
        		isArchive: false,
        		isTag: false,
        		isCategory: false,
        		fancybox_js: "//cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js",
        		scrollreveal: "//cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js",
        		search: true
    		}
		</script>
		
		
		
		<script>
        	yiliaConfig.jquery_ui = [true, "//cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js", "//cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css"];
    	</script>
		

		<script> yiliaConfig.rootUrl = "\/";</script>	
		

		
	</head>

	 
		<body onload="ThisIs22()">
	
  		<div id="container">
    		<div class="left-col">
    			<div class="overlay"></div>
    			<div class="intrude-less">
	    			<header id="header" class="inner">
            			<a href="/" class="profilepic">
                			<img src="/img/me.JPG" class="animated zoomIn">
            			</a>
            			<hgroup>
              				<h1 class="header-author" style="width:100%"><a href="/">Shawn</a></h1>
            			</hgroup>
            			<p class="header-subtitle">一个喜欢捣鼓前端的产品汪。<br/>总字数：<span class="post-count" style="font-weight: bold;font-family: Arial, Helvetica, "宋体";color: black;">17.8k</span></p>

            			<form id="search-form"> <!-- 搜索框相关 -->
    			    		<input type="text" id="local-search-input" name="q" results="0" placeholder="" class="search form-control" autocomplete="off" autocorrect="off"/>
   				    		<i class="fa fa-times" onclick="resetSearch()"></i> <!-- 清空/重置搜索框 -->
			    		</form>
			    		<div id="local-search-result"></div> <!-- 搜索结果区 -->
			    		<p class='no-result'>啊哦。。。<br/>没有符合条件的文章。。。<br/>∠( ᐛ 」∠)＿</p> <!-- 无匹配时显示，注意请在 CSS 中设置默认隐藏 -->
            			
            			<div id="switch-area" class="switch-area">
    			            <div class="switch-wrap">
    			                <section class="switch-part switch-part1">
    			                    <nav class="header-menu">
    			                    	<a href="/" title="回到首页"><i class="fa fa-home"></i></a>
    			                    	<a href="/archives/" title="文章归档"><i class="fa fa-archives"></i></a>
    			                    	<a href="/tags/" title="标签/分类"><i class="fa fa-tags"></i></a>
    			                    	<a href="/photoes/" title="照片/壁纸"><i class="fa fa-photo"></i></a>
    			                    	<a href="/friends/" title="友情链接"><i class="fa fa-links"></i></a>
    			                    	<a href="/about/" title="关于我/留言板"><i class="fa fa-about"></i></a>
    			                    	<a href="/download/" title="相关下载"><i class="fa fa-download"></i></a>
    									<a class="set-view-mode" href="javascript:void(0)" title="夜间模式"><i class="fa fa-moon-o"></i></a>
    			                    </nav>
    			                </section>   
    			                <section class="switch-part switch-part2">
    			                    <div class="widget tagcloud" id="js-tagcloud">
    			                        <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/2017/">2017</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CDN/">CDN</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DFS/">DFS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Github/">Github</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Hexo/">Hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/PS/">PS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/SSL/">SSL</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/flag/">flag</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/https/">https</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/localStorage/">localStorage</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nginx/">nginx</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/sessionStorage/">sessionStorage</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/夜间模式/">夜间模式</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/影评/">影评</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/文档/">文档</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/服务学/">服务学</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/编译原理/">编译原理</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/随笔/">随笔</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/项目管理/">项目管理</a></li></ul>
    			                    </div>
    			                </section>
    			                
    			                            
 			            	</div>
 			            	<div class="marquee"><script type="text/javascript" src="https://api.lwl12.com/hitokoto/main/get?encode=js&charset=utf-8"></script><div id="lwlhitokoto"><script>lwlhitokoto()</script></div></div><script>$('.marquee').marquee();</script>
    			        </div>
    			    </header>   
    			</div>
    			       
    		</div>
    		 
    			<script src="//cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js"></script>
    			<script src="/js/move.js"></script>
    			<div id="movediv"> 
        			<canvas id="glcanvas" width="170" height="200"> <button id="btnChange" class="active" style="visibility:hidden;width=10px!important;">C</button></canvas>
    			</div>
    		
    		<div class="xm"><img src="/img/xm.png"></div>
    		<div class="mid-col">
    			<nav id="mobile-nav">
      <div class="overlay">
          <div class="slider-trigger"></div>
          <h1 class="header-author js-mobile-header hide"><a href="/" title="回到主页">Shawn</a></h1>
      </div>
    <div class="intrude-less">
        <header id="header" class="inner">
            <a href="/" class="profilepic">
                <img src="/img/me.JPG" class="animated zoomIn">
            </a>
            <hgroup>
              <h1 class="header-author"><a href="/" title="回到主页">Shawn</a></h1>
            </hgroup>
            
            <p class="header-subtitle"><span class="post-count">一个喜欢捣鼓前端的产品汪。<br/>总字数：17.8k</span></p>
            
            <nav class="header-menu">
            	<div>
    			<a href="/" title="回到首页"><i class="fa fa-home"></i></a>
    			<a href="/archives/" title="文章归档"><i class="fa fa-archives"></i></a>
    			<a href="/tags/" title="标签/分类"><i class="fa fa-tags"></i></a>
    			<a href="/photoes/" title="照片/壁纸"><i class="fa fa-photo"></i></a>
    			<a href="/friends/" title="友情链接"><i class="fa fa-links"></i></a>
    			</div>
    			<div>
    			<a href="/about/" title="关于我/留言板"><i class="fa fa-about"></i></a>
    			<a href="/download/" title="相关下载"><i class="fa fa-download"></i></a>
    			<a class="set-view-mode" href="javascript:void(0)" title="夜间模式"><i class="fa fa-moon-o"></i></a>
    			</div>
    		</nav><br/><br/><br/>
        </header>                
    </div>
    <link class="menu-list" tags="标签" friends="友情链接" about="关于我"/>
</nav>
      			<div class="body-wrap"><article id="post-NightMode" class="article article-type-post" itemscope itemprop="blogPost">
  
    <div class="article-meta">
      <a href="/2017/01/18/NightMode/" class="article-date">
      <time datetime="2017-01-18T04:32:16.000Z" itemprop="datePublished">2017-01-18</time>
</a>


    </div>
  
  <div class="article-inner">
    
      <input type="hidden" class="isFancy" />
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      		给自己的主题添加夜间模式
    </h1>
  

      </header>
      
      <div class="article-info article-info-post">
        
    <div class="article-category tagcloud">
    <a class="article-category-link" href="/categories/教程/">教程</a>
    </div>


        
    <div class="article-tag tagcloud">
        <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/localStorage/">localStorage</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/sessionStorage/">sessionStorage</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/夜间模式/">夜间模式</a></li></ul>
    </div>

        <div class="clearfix"></div>
      </div>
      
    
    <div class="article-entry" itemprop="articleBody">
      
          
        <blockquote>
<p>2017年1月26日3点更新orz：在<a href="http://www.theask.cn" target="_blank" rel="external">THEASK该问</a>童鞋的努力下真正实现了WordPress的COOKIES功能（然后我俩发现hexo只能在单页面生效，如果使用WordPress的童鞋请转<a href="http://www.theask.cn/4291" target="_blank" rel="external">他的博客相关页面</a>），全局生效，记录时间可修改，并且在教程最后提供了所需的JS文件和CSS样式表下载。下面是自己好不容易摸索到的hexo多页面使用夜间模式的方法orz。</p>
</blockquote>
<p><span class="suojin"></span>我第一次发这篇文章的时候第一段是这么写的：<hr><span class="suojin"></span>很久之前在<a href="http://minwenlsm.pw/" target="_blank" rel="external">Min’s</a>的博客发现了夜间模式的功能，自己也想抽空做下，终于在寒假初实现了此功能，下面贴下相关代码：</p>
<p><span class="suojin"></span>首先修改夜间模式的按钮：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"set-view-mode"</span> <span class="attr">href</span>=<span class="string">"javascript:void(0)"</span> <span class="attr">title</span>=<span class="string">"夜间模式"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-moon-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></td></tr></table></figure>
<a id="more"></a>
<p><span class="suojin"></span>然后在你初始化的js函数中添加以下方法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line">$(function()&#123;</div><div class="line">		var cookie_style = $.cookie(&quot;mystyle&quot;);</div><div class="line">	   $(&apos;.set-view-mode&apos;).click(function()&#123;</div><div class="line">			switchReadMode();</div><div class="line">		&#125;);	</div><div class="line">  	&#125;);</div><div class="line">  	</div><div class="line">  	function switchReadMode()&#123;</div><div class="line">		var btn = $(&apos;.set-view-mode&apos;);</div><div class="line">		var next_mode = $(&apos;body&apos;).hasClass(&apos;night-mode&apos;) ? &apos;day&apos; : &apos;night&apos;;</div><div class="line">		if(next_mode!=&apos;day&apos;)&#123;</div><div class="line">    		$(&apos;body&apos;).addClass(&apos;night-mode&apos;);</div><div class="line">    		btn.find(&apos;i&apos;).attr(&apos;class&apos;,&apos;fa fa-sun-o&apos;);</div><div class="line">    		var style = $(&quot;#night-mode&quot;).attr(&quot;id&quot;);</div><div class="line">    	&#125;else&#123;</div><div class="line">    		$(&apos;body&apos;).removeClass(&apos;night-mode&apos;);</div><div class="line">			btn.find(&apos;i&apos;).attr(&apos;class&apos;,&apos;fa fa-moon-o&apos;);</div><div class="line">			var style = $(&quot;#day-mode&quot;).attr(&quot;id&quot;);</div><div class="line">		&#125;</div><div class="line">    	setCookie(&apos;read-mode&apos;, next_mode, 86400);</div><div class="line">	&#125;</div><div class="line">	function setCookie(name,value,expires)&#123;  </div><div class="line">    	expires = new Date(+new Date + 1000 * 60 * 60 * 24 * expires);</div><div class="line">    	expires = &apos;;expires=&apos; + expires.toGMTString();</div><div class="line">    	path = &apos;;path=/&apos;;</div><div class="line">    	document.cookie = window.siteKey+name+&quot;=&quot;+escape(value)+expires+path;</div><div class="line">	&#125;</div></pre></td></tr></table></figure>
<p><hr><span class="suojin"></span>很明显，上面的缓存功能在hexo上并没有什么卵用，这也是后来<a href="http://www.theask.cn" target="_blank" rel="external">THEASK该问</a>童鞋来找我商量的原因，在浪费了几个小时之后，我终于找到了办法：使用H5的Web存储方法。</p>
<p><span class="suojin"></span>在W3School中，HTML5的Web存储方法是这么写的：</p>
<p><div><i class="fa fa-quote-left" style="font-size:0.5em"></i></div><div style="margin-left:0.5em;margin-right:0.5em"><strong>在客户端存储数据</strong><br>HTML5 提供了两种在客户端存储数据的新方法：<ul><li>localStorage - 没有时间限制的数据存储</li><li>sessionStorage - 针对一个 session 的数据存储</li></ul>之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。<br>在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。<br>对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。<br>HTML5 使用 JavaScript 来存储和访问数据。<br>localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。<br>sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。<br></div><div style="text-align:right"><i class="fa fa-quote-right" style="font-size:0.5em"></i></div><br><span class="suojin"></span>具体的应用例子请前往<a href="http://www.w3school.com.cn/html5/html_5_webstorage.asp" target="_blank" rel="external">HTML 5 Web 存储</a>查看，下面就贴下自己修改过后的js代码辣：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">$(function()&#123;</div><div class="line">    btn = $(&apos;.set-view-mode&apos;);</div><div class="line">    if(sessionStorage.mode==&quot;night&quot;)&#123;</div><div class="line">        $(&apos;body&apos;).addClass(&apos;night-mode&apos;);</div><div class="line">        btn.find(&apos;i&apos;).attr(&apos;class&apos;,&apos;fa fa-sun-o&apos;);</div><div class="line">    &#125;</div><div class="line">    $(&apos;.set-view-mode&apos;).click(function()&#123;</div><div class="line">        var next_mode = $(&apos;body&apos;).hasClass(&apos;night-mode&apos;) ? &apos;day&apos; : &apos;night&apos;;		</div><div class="line">        if(next_mode!=&apos;day&apos;)&#123;</div><div class="line">            $(&apos;body&apos;).addClass(&apos;night-mode&apos;);</div><div class="line">            btn.find(&apos;i&apos;).attr(&apos;class&apos;,&apos;fa fa-sun-o&apos;);</div><div class="line">            sessionStorage.mode=&quot;night&quot;;   </div><div class="line">        &#125;else&#123;</div><div class="line">            $(&apos;body&apos;).removeClass(&apos;night-mode&apos;);</div><div class="line">            btn.find(&apos;i&apos;).attr(&apos;class&apos;,&apos;fa fa-moon-o&apos;);</div><div class="line">            sessionStorage.mode=&quot;day&quot;;</div><div class="line">        &#125;</div><div class="line">    &#125;);			</div><div class="line">&#125;);</div></pre></td></tr></table></figure>
<p><span class="suojin"></span>第二部分的样式依旧没变，当然你如果懒得话可以按照<a href="http://www.theask.cn" target="_blank" rel="external">THEASK该问</a>想到的一个方法（直接在页面最上层添加了一个半透明黑色遮罩）做，下面分别是他想的遮罩和我现在的夜间模式样式代码：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.cover</span>&#123;</div><div class="line"><span class="attribute">position</span>:fixed;</div><div class="line"><span class="attribute">top</span>: <span class="number">0px</span>;</div><div class="line"><span class="attribute">left</span>: <span class="number">0px</span>;</div><div class="line"><span class="attribute">outline</span>:<span class="number">5000px</span> solid <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line"><span class="attribute">z-index</span>: <span class="number">999999999999</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<figure class="highlight"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div></pre></td><td class="code"><pre><div class="line">.night-mode&#123;</div><div class="line">	background-image:none !important;</div><div class="line">	background-color:#3F3F3F !important;</div><div class="line">	color:#999;</div><div class="line">	font-weight:lighter;</div><div class="line">	.mid-col &#123;</div><div class="line">        background: rgb(63, 63, 63, 1) !important;</div><div class="line">    	color: #999 !important;</div><div class="line">    	font-weight: lighter !important;</div><div class="line">    	.article &#123;</div><div class="line">    	    background: rgba(255,255,255,0) !important;</div><div class="line">    	&#125;</div><div class="line">    	.article-info-index.article-info &#123;</div><div class="line">    		border-top: 1px solid #999 !important;</div><div class="line">    	&#125;</div><div class="line">    	.archives-wrap &#123;</div><div class="line">    		background: rgb(63, 63, 63, 0.7) !important;</div><div class="line">    		border: 2px solid #999 !important;</div><div class="line">    		.archive-article-title&#123;</div><div class="line">    			color: #999 !important;</div><div class="line">    		&#125;</div><div class="line">    		.archives .archive-article &#123;</div><div class="line">				border-bottom: 1px solid grey !important;</div><div class="line">    			border-top: 1px solid grey !important;</div><div class="line">			&#125;</div><div class="line">    	&#125;</div><div class="line">    	.article-header &#123;</div><div class="line">    		border-left: #999 !important;</div><div class="line">    	&#125;</div><div class="line">    &#125;</div><div class="line">    .tagcloud a&#123;</div><div class="line">    	background: #1c1c1c !important;</div><div class="line">    &#125;</div><div class="line">    .tagcloud a.color1::before &#123;</div><div class="line">    	border-right-color: #1c1c1c !important;</div><div class="line">	&#125;</div><div class="line">	.tagcloud a.color2::before &#123;</div><div class="line">    	border-right-color: #1c1c1c !important;</div><div class="line">	&#125;</div><div class="line">	.tagcloud a.color3::before &#123;</div><div class="line">    	border-right-color: #1c1c1c !important;</div><div class="line">	&#125;</div><div class="line">	.tagcloud a.color4::before &#123;</div><div class="line">    	border-right-color: #1c1c1c !important;</div><div class="line">	&#125;</div><div class="line">	.tagcloud a.color5::before &#123;</div><div class="line">    	border-right-color: #1c1c1c !important;</div><div class="line">	&#125;</div><div class="line">	.tagcloud a.color6::before &#123;</div><div class="line">    	border-right-color: #1c1c1c !important;</div><div class="line">	&#125;</div><div class="line">	.tagcloud a.color0::before &#123;</div><div class="line">    	border-right-color: #1c1c1c !important;</div><div class="line">	&#125;</div><div class="line">    .article-category-link:before&#123;</div><div class="line">    	border-right-color: #1c1c1c !important;</div><div class="line">    &#125;</div><div class="line">	.article-more-link a&#123;</div><div class="line">		background: #1c1c1c !important;</div><div class="line">	&#125;    </div><div class="line">	.article-entry h1, .article-entry h2, .article-entry h3, .article-entry h4, .article-entry h5, .article-entry h6&#123;</div><div class="line">		border-bottom: 1px solid #1c1c1c !important;</div><div class="line">		color: #999;</div><div class="line">	&#125;</div><div class="line">	.article-entry hr&#123;</div><div class="line">		background-color: #1c1c1c;</div><div class="line">    	border: 0;</div><div class="line">    	height: 2px;</div><div class="line">	&#125;</div><div class="line">	.article-title&#123;</div><div class="line">		color: #b0a0aa;</div><div class="line">	&#125;</div><div class="line">	.frienddiv,.aboutmediv&#123;</div><div class="line">		color: #999;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line">.night-mode .left-col&#123;</div><div class="line">	background-color: rgba(33, 33, 33, 1) !important;</div><div class="line">	color:#999!important;</div><div class="line">	font-weight:lighter!important;</div><div class="line">	.overlay&#123;</div><div class="line">		background-color: rgba(33, 33, 33, 1) !important;</div><div class="line">        opacity: 1!important;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">.night-mode #header&#123;</div><div class="line">	.header-subtitle&#123;</div><div class="line">		color:#999!important;</div><div class="line">	&#125;</div><div class="line">	a&#123;</div><div class="line">		color:#999!important;</div><div class="line">	&#125;</div><div class="line">	.profilepic&#123;</div><div class="line">        border: 5px solid grey!important;</div><div class="line">    &#125;</div><div class="line">    .header-menu i&#123;</div><div class="line">    	border: 2px solid #999 !important;</div><div class="line">    	color: #999!important;</div><div class="line">    	background-color: rgba(0,0,0,.1);</div><div class="line">    	&amp;:hover&#123;</div><div class="line">                background: grey;</div><div class="line">                color: #fff;</div><div class="line">            &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">.night-mode #footer&#123;</div><div class="line">	text-shadow: 0 1px #999 !important;</div><div class="line">	.outer&#123;</div><div class="line">		color: #999 !important;</div><div class="line">	&#125;</div><div class="line">&#125;</div><div class="line">.night-mode #page-nav&#123;</div><div class="line">	.page-number&#123;</div><div class="line">		color: #999;</div><div class="line">		&amp;:hover&#123;</div><div class="line">            background: #999;</div><div class="line">            color: black;</div><div class="line">        &#125;</div><div class="line">	&#125;</div><div class="line">	.current &#123;</div><div class="line">		color: black;</div><div class="line">    	background: #999 !important;</div><div class="line">    &#125;</div><div class="line">    .extend&#123;</div><div class="line">        color: #999;</div><div class="line">        margin: 0 27px;</div><div class="line">        opacity: 1;</div><div class="line">        &amp;:hover&#123;</div><div class="line">            color: #4d4d4d;</div><div class="line">        &#125;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><span class="suojin"></span>再次大功告成！放一张预览图：(当然，我只改了一些主要的样式，其他的仍然欢迎大家给我补充~)</p>
<p style="text-align:center"><br><img src="http://pictures.shawnzeng.com/nightmode.png" alt="夜间模式" width="100%/"></p>



      
    </div>
    
  </div>
  
	<! -- 添加打赏功能 -->
<div class ="post-donate">
    <div id="donate_board" class="donate_bar center">
        <a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏">￥打赏</a><span class="donate_txt">赞助吃土少年！￣﹃￣</span>
    </div>  
	<div id="donate_guide" class="donate_bar center hidden" >
		<!-- 支付宝打赏图案 --><img src="/img/zhifubaodonate.png" alt="支付宝打赏" /> 
		<!-- 微信打赏图案 --><img src="/img/weixindonate.png" alt="微信打赏" />  
    </div>
	<script type="text/javascript">
		document.getElementById('btn_donate').onclick = function(){
			$('#donate_board').addClass('hidden');
			$('#donate_guide').removeClass('hidden');
		}
	</script>
</div>
  
  
    
    <div class="copyright">
        <p><span>本文标题:</span><a href="/2017/01/18/NightMode/">给自己的主题添加夜间模式</a></p>
        <p><span>文章作者:</span><a href="/" title="回到主页">Shawn</a></p>
        <p><span>本文字数:</span><span class="post-count">1,262字</span></p>
        <p><span>发布时间:</span>2017-01-18, 12:32:16</p>
        <p><span>最后更新:</span>2017-02-05, 22:19:29</p>
        <p>
            <span>原始链接:</span><a class="post-url" href="/2017/01/18/NightMode/" title="给自己的主题添加夜间模式">http://shawnzeng.com/2017/01/18/NightMode/</a>
            <span class="copy-path" data-clipboard-text="原文: http://shawnzeng.com/2017/01/18/NightMode/　　作者: Shawn" title="点击复制文章链接"><i class="fa fa-clipboard"></i></span>
            <script> var clipboard = new Clipboard('.copy-path'); </script>
        </p>
        <p>
            <span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="CC BY-NC-SA 4.0 International" target = "_blank">"署名-非商用-相同方式共享 4.0"</a> 转载请保留原文链接及作者。
        </p>
    </div>



    <nav id="article-nav">
        
            <div id="article-nav-newer" class="article-nav-title">
                <a href="/2017/01/25/AddBaiduCDN/">
                    给自己的博客添加CDN加速
                </a>
            </div>
        
        
            <div id="article-nav-older" class="article-nav-title">
                <a href="/2017/01/13/2017hanjiaplan/">
                    2017寒假计划get√！
                </a>
            </div>
        
    </nav>

  
  
</article>

    <div id="toc" class="toc-article">
        <strong class="toc-title">文章目录</strong>
        
            
        
    </div>
    <style>
        .left-col .switch-btn,
        .left-col .switch-area {
            display: none;
        }
        .toc-level-3 i,
        .toc-level-3 ol {
            display: none !important;
        }
    </style>

    <input type="button" id="tocButton" value="隐藏目录"  title="点击按钮隐藏或者显示文章目录">

    <script>
        yiliaConfig.toc = ["隐藏目录", "显示目录", !!"false"];
    </script>



    <div class="share">
    
        <div class="bdsharebuttonbox">
            <a href="#" class="fa fa-twitter bds_twi" data-cmd="twi" title="分享到推特"><span class=""></a>
            <a href="#" class="fa fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a href="#" class="fa fa-qq bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
            <a href="#" class="fa fa-files-o bds_copy" data-cmd="copy" title="复制网址"></a>
            <a href="#" class="fa fa fa-envelope-o bds_mail" data-cmd="mail" title="通过邮件分享"></a>
            <a href="#" class="fa fa-weixin bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
            <a href="#" class="fa fa-share-alt bds_more" data-cmd="more"></i></a>
        </div>
       <script>
            window._bd_share_config={
                "common":{"bdSnsKey":{},"bdText":"给自己的主题添加夜间模式　| 诗酒趁年华　","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
        </script>
    

    
</div>







    
      <div class="duoshuo" id="comments">
    <div id="comment-box" ></div>
    <div class="ds-thread" id="ds-thread" data-thread-key="2017/01/18/NightMode/" data-title="给自己的主题添加夜间模式" data-url="http://shawnzeng.com/2017/01/18/NightMode/"></div>
    <script type="text/javascript">
        var duoshuoQuery = {short_name:"zengshuai1996"};
        var loadComment = function(){
            var d = document, s = d.createElement('script');
            //s.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//shawnzeng.com/js/embed.js';
            s.src = '/js/embed.js';
            s.async = true; s.charset = 'UTF-8';
            (d.head || d.body).appendChild(s);
        }

        
    </script>
    
    <script> loadComment(); </script>

</div>
    




    <div class="scroll" id="post-nav-button">
        
            <a href="/2017/01/25/AddBaiduCDN/" title="上一篇: 给自己的博客添加CDN加速">
                <i class="fa fa-angle-left"></i>
            </a>
        

        <a title="文章列表"><i class="fa fa-bars"></i><i class="fa fa-times"></i></a>

        
            <a href="/2017/01/13/2017hanjiaplan/" title="下一篇: 2017寒假计划get√！">
                <i class="fa fa-angle-right"></i>
            </a>
        
    </div>

    <ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/2017/04/14/StopHexo/">停止更新</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/30/Https/">腾讯云Centos7启用https</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/25/AddBaiduCDN/">给自己的博客添加CDN加速</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/18/NightMode/">给自己的主题添加夜间模式</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/13/2017hanjiaplan/">2017寒假计划get√！</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/13/PSPic/">使用PS压缩背景图</a></li><li class="post-list-item"><a class="post-list-link" href="/2017/01/10/Algorithm-homework/">算法设计与分析——突破O(m)时间复杂度限制的无向图动态深度优先算法</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/31/Hi2017/">2017新年快乐！</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/30/HuaJi/">滑稽大盗</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/27/Serviceology02/">服务学作业——堆糖电商服务建模</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/14/Compile_SubsetConstruction_Algorithm/">编译原理——子集构造法</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/05/HexoStudy/">Hexo学习笔记</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/05/AddUML/">给hexo添加uml时序图和流程图功能</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/03/YourName/">「君の名は。」</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/12/01/Yoga/">林宥嘉：她说好</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/11/30/Compile02/">编译原理——语言及其文法</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/11/30/Compile01/">编译原理——简介</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/11/28/SDAPM-Scope-Statement/">Software Development And Project Management Homework——Scope Statement</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/11/28/SDAPM-Project-Charter/">Software Development And Project Management Homework——Project Charter</a></li><li class="post-list-item"><a class="post-list-link" href="/2016/11/05/RestartBlog/">重头再来:Mac上搭建基于GitHub的Hexo博客</a></li></ul>




    <script>
        
    </script>
</div>
      			<footer id="footer">
    <div class="outer">
        <div id="footer-info">
            <div class="footer-left">
                <i class="fa fa-copyright"></i> 
                2016-2017 <i class="fa fa-heart animated infinite pulse"></i> Shawn <a href="http://www.miitbeian.gov.cn">黑ICP备17000197号-1</a>
            </div>
            <div class="footer-right">
            	<span class="my-face">(●'◡'●)ﾉ</span>
				<span id="span_dt_dt"></span>
            </div>
        </div>
        
            <div class="visit">
                
                    <span id="busuanzi_container_site_pv" style='display:none'>
                        <span id="site-visit" title="本站到访数"><i class="fa fa-user" aria-hidden="true"></i><span id="busuanzi_value_site_uv"></span>
                        </span>
                    </span>
                
                
                    <span>| </span>
                
                
                    <span id="busuanzi_container_page_pv" style='display:none'>
                        <span id="page-visit"  title="本页阅读量"><i class="fa fa-eye animated infinite pulse" aria-hidden="true"></i><span id="busuanzi_value_page_pv"></span>
                        </span>
                    </span>
                
            </div>
        
    </div>
</footer>

    		</div>
    		<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


    <script src="/js/raphael.js"></script>
    <script src="/js/underscore.js"></script>
    <script src="/js/sequence-diagram.js"></script>
    <script src="/js/flowchart.js"></script>
    
<!-- Chart Render -->
<script type="text/javascript">
  $(".sequence").sequenceDiagram({theme: 'simple'});
  var flowCount = 0;
  $(".flow").each(function() {
      var el = $(this);
      el.hide();
      el.after('<div id="flow-' + flowCount + '"></div>');
      var chart = flowchart.parse(el.text());
      chart.drawSVG('flow-' + flowCount);
      flowCount++;
  });
</script>
<!-- End Chart Render -->


<script data-main="/js/main.js" src="//cdn.bootcss.com/require.js/2.2.0/require.min.js"></script>

    <script>
        $(document).ready(function() {
            var iPad = window.navigator.userAgent.indexOf('iPad');
            if (iPad > -1 || $(".left-col").css("display") === "none") {
                var bgColorList = ["#9db3f4", "#414141", "#e5a859", "#f5dfc6", "#c084a0", "#847e72", "#cd8390", "#996731"];
                var bgColor = Math.ceil(Math.random() * (bgColorList.length - 1));
                $("body").css({"background-color": bgColorList[bgColor], "background-size": "cover"});
            }
            else {
                var backgroundnum = 5;
                var backgroundimg = "url(/background/bg-x.jpg)".replace(/x/gi, Math.ceil(Math.random() * backgroundnum));
                $("body").css({"background": backgroundimg, "background-attachment": "fixed", "background-size": "cover"});
            }
        })
    </script>





    <script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$']],
    processEscapes: true,
    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
	linebreaks: { automatic: true, width: "container" }
  }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<!--script type="text/javascript" src="http://mathjax.josephjctang.com/MathJax.js?config=TeX-MML-AM_HTMLorMML"-->
<!--script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"-->
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML">
</script>


<div class="scroll" id="scroll">
    <a href="#" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
    <a href="#comments" onclick="load$hide();" title="查看评论"><i class="fa fa-comments-o"></i></a>
    <a href="#footer" title="转到底部"><i class="fa fa-arrow-down"></i></a>
</div>
<script>
    // Open in New Window
    
        var oOpenInNew = {
            
            
            
            
            
            
            
             miniArchives: "a.post-list-link", 
            
             friends: "#js-friends a", 
             socail: ".social a" 
        }
        for (var x in oOpenInNew) {
            $(oOpenInNew[x]).attr("target", "_blank");
        }
    
</script>

    <script>
        var originTitle = document.title;
        var titleTime;
        document.addEventListener("visibilitychange", function() {
            if (document.hidden) {
                document.title = "(つェ⊂)" + originTitle;
                clearTimeout(titleTime);
            }
            else {
                document.title = "(*´∇｀*)" + originTitle;
                titleTime = setTimeout(function() {
                    document.title = originTitle;
                }, 2000);
            }
        })
    </script>

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    		<div class="musicbox">
				<div class="player">
					<div id="player_bck" class="aplayer"></div>
				</div>
				<div class="pop-music" title="音乐"></div>
			</div>
  		</div>
  		<script src="/js/music.js"></script>
	</body>	
</html>